<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>

        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">

      <schart class="schart" canvasId="bar" :options="options1"></schart>
    </div>
  </div>
</template>

<script>
import Schart from 'vue-schart';
import axios from "axios";

export default {
  name: 'basecharts',
  components: {
    Schart
  },
  data() {
    return {
      options1: {},

    };
  },
  mounted() {
    axios.get("/log/findDays").then(res=>{
      let arr1 = [];
      let arr2 = [];
      res.data.forEach(v=>{
        console.log(v);
        arr1.push(v.days)
        arr2.push(v.money)
      })
      this.options1 = {
        type: 'bar',
        title: {
          text: '最近一个月收入'
        },
        bgColor: '#ffffff',
        labels: arr1,
        datasets: [
          {
            label: '统计',
            fillColor: 'rgba(241, 49, 74, 0.5)',
            data: arr2
          },
        ]
      };
    });
  }
};
</script>

<style scoped>
.schart-box {
  display: inline-block;
  margin: 20px;
}

.schart {
  width: 100%;
  height: 400px;
}

.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>